<template>
	<view class="pageBox">
		<image src="@/static/common/talentApartment_topBG.png" class="topBG" mode="scaleToFill"></image>
		<view class="contentBoxF">
			<view class="contentBox">
				<view class="titleBox">
					<image class="titleImg" src="@/static/common/talentApartment_titleLeft.png" mode="scaleToFill">
					</image>
					<view class="title">人才咖啡列表</view>
					<image class="titleImg" src="@/static/common/talentApartment_titleRight.png" mode="scaleToFill">
					</image>
				</view>
				<view class="rowBox" v-for="(item,index) in dataList.rows " :key="index"
					:style="{backgroundColor:bgColor[index%4]}">
					<image class="rowImg" :src="item.file" mode="scaleToFill"></image>
					<view class="centerBox">
						<view class="title">{{item.name}}</view>
						<!-- <view class="text">{{item.address}}</view> -->
					</view>
					<view class="btnBox" :style="{background:btnBGs[index%4]}"
						@click="goto('common/coffeeView/coffeeInfo/coffeeInfo',{id:item.talentCoffeeId})">去查看</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as systemApi from "@/api/system.js"
	import * as coffeeApi from "@/api/coffee.js"
	export default {
		data() {
			return {

				bgColor: ['#D0E7FE', '#B1F7ED', '#FDE2C5', '#FDF4C5'],
				btnBGs: ['linear-gradient( 90deg, #5F96E8 0%, #1977E1 100%)',
					'linear-gradient( 90deg, #03D8AF 0%, #00A57D 100%)',
					'linear-gradient( 90deg, #F2B018 0%, #F57E01 100%)',
					'linear-gradient( 90deg, #F2B018 0%, #F57E01 100%)'
				],
				listObj: {},
				dataList: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
					rows: []
				},
				pageNumMax: 1,

				dicts: {
					room_type: [],
				}
			}
		},
		onLoad() {
			this.getRoomList()
			this.getDictDataList('room_type')
		},
		methods: {
			getDictDataList(dictType) {
				systemApi.dictDataList(dictType).then(res => {
					let objs = {}
					res.rows.forEach((item) => {
						objs[item.dictValue] = item.dictLabel
					})
					this.dicts[dictType] = objs

				})
			},
			getRoomList(pageNum = 1, pageSize = 10) {
				const page = {
					pageNum,
					pageSize,
					...this.listObj
				}
				coffeeApi.coffeeList(page).then(res => {
					let list = []
					this.dataList.pageNum = pageNum
					this.dataList.pageSize = pageSize
					this.dataList.total = res.total
					this.pageNumMax = Math.ceil(res.total / 10)
					if (pageNum == 1) {
						this.dataList.rows = []
					}
					list = list.concat(res.rows)
					this.dataList.rows = list
					console.log(this.pageNumMax, res.rows, list);
				})
			},
			goto(url, data) {
				this.$navTo(`pages/${url}`, data)
			},
		},
		onReachBottom() {
			const dataList = this.dataList
			let page = {
				pageNum: dataList.pageNum,
				pageSize: dataList.pageSize,
				total: dataList.total,
			}
			const pageNumMax = this.pageNumMax
			if (page.pageNum < this.pageNumMax) {
				page.pageNum++
				this.getRoomList(page.pageNum, page.pageSize)
			}
			console.log('到底');
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		background-color: #9FA0D8;
	}

	.pageBox {
		padding-bottom: 30rpx;

		.topBG {
			width: 100%;
			height: 726rpx;
			object-fit: cover;
			position: absolute;
			z-index: 1;
		}

		.contentBoxF {
			padding: 0 30rpx;
			position: relative;
			padding-top: 80%;
			z-index: 2;
		}

		.contentBox {
			padding: 0 30rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, #DBE0F8 0%, #FFFFFF 27%);
			border-radius: 16rpx;
			border: 2rpx solid #A5B4FF;
		}

		.titleBox {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 40rpx;
			margin-bottom: 30rpx;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				margin: 0 20rpx;
			}

			.titleImg {
				width: 54rpx;
				height: 54rpx;
			}
		}

		.rowBox {
			padding: 24rpx 30rpx;
			background: #D0E7FE;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.rowImg {
				width: 108rpx;
				height: 108rpx;
				object-fit: cover;
				flex-shrink: 0;
				margin-right: 20rpx;
			}


			.centerBox {}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #4161B1;
				margin-bottom: 16rpx;
			}

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #6F87C2;
			}

			.btnBox {
				flex-shrink: 0;
				width: 180rpx;
				height: 76rpx;
				// background: linear-gradient(90deg, #5F96E8 0%, #1977E1 100%);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>